<template>
    <div class="editAboutLookfor">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span>  {{language.unify_lookingFor}} </span>
            </span>
            <span :class="submitStatus ? 'right rightActive' : 'right'" @click="updateLookfor">{{language.unify_done}}</span>
        </div>
        <div class="body">
            <ul class="editBox">
                <li>
                    <label>{{language.unify_gender}}</label>
                    <div class="multiple">
                        <div class="multipleHtml">{{genderRender.str}}</div>
                        <select name="matchGender" class="selectA" v-model="match_gender" @change="updateInput" multiple>
                            <option v-for="item in genderRender.select" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                </li>
                <li>
                    <label>{{language.unify_age}}</label>
                    <table class="ageTab">
                        <tr>
                            <td>
                                <select name="matchAgeMin" class="selectB" v-model="updateData.matchAgeMin" @change="updateInput">
                                    <option v-for="item in ageMinRender.select" :value="item.value">{{item.label}}</option>
                                </select>
                            </td>
                            <td>
                                <div class="line">
                                    —
                                </div>
                            </td>
                            <td>
                                <select name="matchAgeMax" class="selectB" v-model="updateData.matchAgeMax" @change="updateInput">
                                    <option v-for="item in ageMaxRender.select" :value="item.value">{{item.label}}</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </li>
                <li>
                    <label>{{language.editProfile_for}}</label>
                    <div class="multiple">
                        <div class="multipleHtml">{{lookingForRender.str}}</div>
                        <select name="lookingFor" class="selectA" multiple v-model="looking_for" @change="updateInput">
                            <option v-for="item in lookingForRender.select" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                </li>
            </ul>
        </div>
        <loading :props="{type:'page' ,show:ajaxBool}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import storeDataPartMixin from '../common/storeDataPartMixin'
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'editAboutLookfor',

    components: {
        publicDialog,
        loading
    },

    mixins: [storeDataPartMixin],

    data: function() {
        return {
            dialogData: {},
            updateData: {
                matchGender: '',
                matchAgeMin: '',
                matchAgeMax: '',
                lookingFor: '',
            },
            submitStatus: false,
            ajaxBool: false,
        }
    },

    activated: function() {
        this.updateData.matchGender = this.userInfo.match.match_gender;
        this.updateData.matchAgeMin = this.userInfo.match.match_age_min;
        this.updateData.matchAgeMax = this.userInfo.match.match_age_max;
        this.updateData.lookingFor = this.userInfo.about.looking_for;
    },

    computed: {
        match_gender: {
            get: function() {
                return this.getMultipleSelectArr(this.updateData.matchGender, Unit.getObjLocalStorage('ms_gender'));
            },
            set: function(newValue) {
                this.updateData.matchGender = this.getMultipleSelectValue(newValue);
            }
        },
        genderRender() {
            let obj = {
                select: Unit.getObjLocalStorage('ms_gender'),
                str: this.getMultipleSelectLable(Unit.getObjLocalStorage('ms_gender'), this.updateData.matchGender, ', '),
            };
            return obj;
        },
        looking_for: {
            get: function() {
                return this.getMultipleSelectArr(this.updateData.lookingFor, Unit.getObjLocalStorage('ms_relation'));
            },
            set: function(newValue) {
                this.updateData.lookingFor = this.getMultipleSelectValue(newValue);
            }
        },
        lookingForRender() {
            let obj = {
                select: Unit.getObjLocalStorage('ms_relation'),
                str: this.getMultipleSelectLable(Unit.getObjLocalStorage('ms_relation'), this.updateData.lookingFor, ', ')
            };
            return obj;
        },
        ageMinRender() {
            let obj = {
                select: []
            };
            for (let i = 18; i < 100; i++) {
                obj.select.push({
                    label: i,
                    value: i
                })
            }
            return obj;
        },
        ageMaxRender() {
            let obj = {
                select: []
            };
            for (let i = 18; i < 100; i++) {
                obj.select.push({
                    label: i,
                    value: i
                })
            }
            return obj;
        },

        userInfo() {
            return this.$store.state.user.userInfo;
        }
    },

    methods: {
        updateInput: function(e) {
            let inputName = e.target.name;
            if (inputName == 'matchAgeMin' || inputName == 'matchAgeMax') {
                let minAge = this.updateData.matchAgeMin,
                    maxAge = this.updateData.matchAgeMax;
                if (minAge > maxAge) {
                    this.updateData.matchAgeMin = maxAge;
                    this.updateData.matchAgeMax = minAge;
                }
            }
            this.submitStatus = true;
        },

        updateLookfor: function(e) {
            let tthis = this,
                userInfo = Unit.getObjSessionStorage("ms_myself") || {};

            if (!tthis.submitStatus) {
                return false
            } else {
                var obj = {
                    data: {
                        match_gender: tthis.updateData.matchGender,
                        match_age_min: tthis.updateData.matchAgeMin,
                        match_age_max: tthis.updateData.matchAgeMax,
                        relation: tthis.updateData.lookingFor,
                    },
                    processData: function(result) {
                        if (result.errs) {
                            tthis.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: result.errs[0].errmsg,
                                }
                            };
                            return;
                        } else {
                            if (userInfo.match.match_gender !== result.data.match_gender) {
                                Unit.setSessionStorage('letsmeetRestart', true);
                            }
                            userInfo.match.match_gender = result.data.match_gender;
                            userInfo.match.match_age_min = result.data.match_age_min;
                            userInfo.match.match_age_max = result.data.match_age_max;
                            userInfo.about.looking_for = result.data.relation;
                            tthis.$router.back();
                            return userInfo;
                        }
                    },
                    complete: function() {
                        tthis.submitStatus = false;
                        tthis.ajaxBool = false;
                    }
                }
                this.ajaxBool = true;
                this.$store.dispatch('user_updateProfile', obj);
            }
        },
    }
}

</script>
<style scoped>
.editAboutLookfor {
    background: #fff;
    padding: 44px 0 51px 0;
}

.editAboutLookfor .editBox {
    margin: 10px 0 0 0;
}

.editAboutLookfor .editBox li {
    margin: 0 10px;
    border-bottom: 1px dashed #dcdfe3;
    padding: 10px 0;
}

.editAboutLookfor .editBox li:last-child {
    border-bottom: 0;
}

.editAboutLookfor .editBox label {
    font-size: 14px;
    color: #000;
    line-height: 16px;
    display: block;
    min-height: 16px;
}

.editAboutLookfor .editBox select.selectA {
    width: 100%;
    padding: 0;
    color: #777;
    font-size: 14px;
    background: #fff;
    padding: 6px 0;
}

.editAboutLookfor .editBox select.selectB {
    border-radius: 3px;
    height: 27px;
    padding: 0 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
    color: #000000;
    color: #777;
}

.editAboutLookfor .editBox .ageTab {
    border-collapse: collapse;
}

.editAboutLookfor .editBox .ageTab td {
    vertical-align: middle;
    text-align: center;
    padding: 10px 0 0 0;
}

.editAboutLookfor .editBox .line {
    line-height: 29px;
    margin: 0 10px;
}

.editAboutLookfor .editBox .multiple {
    height: 29px;
    overflow: hidden;
    position: relative;
}

.editAboutLookfor .editBox .multiple .multipleHtml {
    line-height: 29px;
    height: 29px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    color: #777;
    font-size: 14px;
}

.editAboutLookfor .editBox .multiple select {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

</style>
